<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-table :data="tableData" row-key="id" border>
      <el-table-column type="index" label="序号" width="58" />
      <el-table-column prop="name" label="账号名称" v-slot="{ row }">
        <el-form-item prop="name" v-if="row.isEdit">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <template v-else>{{ row.name }}</template>
      </el-table-column>
      <el-table-column prop="platform" label="平台" v-slot="{ row }">
        <el-form-item prop="platform" v-if="row.isEdit">
          <el-input v-model="formData.platform"></el-input>
        </el-form-item>
        <template v-else>{{ row.platform }}</template></el-table-column
      >
      <el-table-column prop="quotation" label="报价" v-slot="{ row }">
        <el-form-item prop="quotation" v-if="row.isEdit">
          <el-input-number v-model="formData.quotation" :min="0" />
        </el-form-item>
        <template v-else>{{ row.quotation }}</template></el-table-column
      >
      <el-table-column prop="cost" label="成本" v-slot="{ row }">
        <el-form-item prop="cost" v-if="row.isEdit">
          <el-input-number v-model="formData.cost" :min="0" />
        </el-form-item>
        <template v-else>{{ row.cost }}</template></el-table-column
      >
      <el-table-column prop="rebate" label="返点" v-slot="{ row }">
        <el-form-item prop="rebate" v-if="row.isEdit">
          <el-input-number v-model="formData.rebate" :min="0" />
        </el-form-item>
        <template v-else>{{ row.rebate }}</template></el-table-column
      >
      <el-table-column
        label="操作"
        fixed="right"
        width="120"
        v-slot="{ row, $index }"
      >
        <template v-if="!row.isEdit">
          <el-button
            type="text"
            :disabled="!!tableData.find((item) => item.isEdit)"
            @click="editRow(row)"
            >编辑</el-button
          >
          <el-button type="text" @click="deleteRow($index)"
            >删除</el-button
          ></template
        >
        <template v-else>
          <el-button type="text" @click="saveData(row, $index)">保存</el-button>
          <el-button type="text" @click="cancelEdit(row, $index)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import { table } from "console";
import { ref, reactive, watch, toRefs, nextTick } from "vue";
export interface Account {
  id?: number;
  name: string;
  platform: string;
  quotation: number | null;
  cost: number | null;
  rebate: number | null;
  payBack?: boolean;
  schedule?: string;
  link?: string;
  read?: number;
  like?: number;
  comment?: number;
  collect?: number;
  forward?: number;
  play?: number;
  costSide?: string;
  contract?: string;
  isPay?: boolean;
  isEdit?: boolean;
}
let isNew = true;
const props = defineProps<{
  tableData: Account[];
}>();
const { tableData } = toRefs(props);
const form = ref();
const formData = ref<Account>({
  name: "",
  platform: "",
  quotation: null,
  cost: null,
  rebate: null,
});
const rules = reactive({
  name: [
    {
      required: true,
      message: "请填写名称",
      trigger: "blur",
    },
  ],
});
function editRow(row: Account) {
  row.isEdit = true;
  isNew = false;
  nextTick(() => {
    formData.value = { ...row };
  });
}
function saveData(row: Account, index: number) {
  form.value.validate((success: boolean) => {
    if (success) {
      tableData.value[index] = {
        ...formData.value,
        id: row.id,
        isEdit: false,
      };
      form.value.resetFields();
    }
  });
}
function cancelEdit(row: Account, index: number) {
  if (isNew) {
    tableData.value.splice(index,1);
  } else {
    row.isEdit = false;
    isNew = true;
  }
  form.value.resetFields();
}
function deleteRow(index: number) {
  tableData.value.splice(index,1);
}
</script>
<style scoped>
.el-form-item {
  margin-top: 20px;
}
</style>
